import React, {Component} from 'react';
import {Grid,Table,Button,Feedback,Dialog} from '@icedesign/base';
import IceContainer from '@icedesign/container';
import IceLabel from '@icedesign/label';
import FoundationSymbol from 'foundation-symbol';
import AddDict from './components/AddDict';
import QueryDict from '../QueryDict';
import API from '../../../../../../tools/API';

const {Row, Col} = Grid;
/**
*  字典详情列表
*/
export default class DictDetailList extends Component{
  constructor(props) {
     super(props);
     this.state = {
       isLoading:true,
       query:{
         parent_id:this.props.parentId
       },
       rowSelection: {
          onChange: this.onChange.bind(this),
          selectedRowKeys: []
       },
     }
     this.deleteDict = this.deleteDict.bind(this);
     this.getDictListData = this.getDictListData.bind(this);
  }
  onChange(ids, records) {
    let { rowSelection } = this.state;
    rowSelection.selectedRowKeys = ids;
    this.setState({ rowSelection });
  }

  //初始化
  componentWillMount(){
    //获取当前登录用户信息
    this.getDictListData();
  }

  getDictListData(){
    //获取当前登录用户信息
    API.getDictListData(this.state.query).then((res) => {
      //设置展开tree
      this.setState({data:res.result.list,isLoading:false});
    })
  }
  //类型
  renderType = (value,index,record) =>{
    return (
      <div>
        {
          record.type == 0?
            <IceLabel status="success">启用</IceLabel>
          :
            <IceLabel status="danger">停用</IceLabel>
        }
      </div>
    )
  }

  //删除字典
  deleteDict(){
    const ids = this.state.rowSelection.selectedRowKeys;
    if (ids.length === 0) {
      Feedback.toast.prompt("请选择删除的记录");
      return;
    }
    let dialog = Dialog.confirm({
      content: "确定要删除吗？",
      locale: {
        ok: "确认",
        cancel: "取消"
      },
      onOk: () => {
        return new Promise(resolve => {
          API.delteDict({ids:this.state.rowSelection.selectedRowKeys}).then((res) => {
            Feedback.toast.success("删除成功");
            this.getDictListData();
            dialog.hide();
          });
        });
      }
    });
  }

  //操作
  renderCaozuo(value,index,record){
    return (
      <div>
        <AddDict
          reload={this.getDictListData}
          dict={record}
          parentId={this.props.parentId}
          parentValue={this.props.value}/>
      </div>
    )
  }

  render(){
    return(
      <div>
        <IceContainer title={"字典数据（"+this.props.value+"）"} loading={this.state.isLoading}>
          <QueryDict
            updateQuery={(json)=>{
              this.state.query = json;
              this.setState(this.state);
              this.getDictListData();
            }}
            parentId={this.props.parentId}/>
          <div className="menu-caozuo">
            <Row justify='center'>
              <Col span='12'>
                <Button type="normal" onClick={()=>this.props.return()}>
                  <FoundationSymbol type="backward" size="small" />返回
                </Button>
              </Col>
              <Col span='12' style={{textAlign:'right'}}>
                  <AddDict
                    reload={this.getDictListData}
                    parentId={this.props.parentId}
                    parentValue={this.props.value}/>
                  <span style={{margin:'0 5px'}}>
                    <Button onClick={this.deleteDict} type="primary"  shape="warning">
                      <FoundationSymbol size="small" type="delete" /> 删除
                    </Button>
                  </span>
              </Col>
            </Row>
          </div>
          <Table
            dataSource={this.state.data}
            hasBorder={false}
            primaryKey="id"
            isTree = {true}
            indentSize={12}
            rowSelection={this.state.rowSelection}
          >
            <Table.Column align={"center"} width={110} title="字典标签" dataIndex="label"/>
            <Table.Column align={"center"} width={110} title="字典值" dataIndex="value"/>
            <Table.Column align={"center"} width={70} title="排序" dataIndex="sort"/>
            <Table.Column align={"center"} width={70} title="状态" cell={this.renderType.bind(this)}/>
            <Table.Column align={"center"} width={150} title="备注" dataIndex="remarks" />
            <Table.Column align={"center"} width={160} title="时间" dataIndex="create_date" />
            <Table.Column align={"center"} width={140} title="操作" cell={this.renderCaozuo.bind(this)}/>
          </Table>
        </IceContainer>
      </div>
    )
  }

}
